<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text to Emoji Converter</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: #fff;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
width: 100%;
max-width: 600px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 30px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 20px;
}
.logo-icon {
background: white;
width: 60px;
height: 60px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: #6a11cb;
font-size: 28px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.tagline {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
}
.converter-box {
background: rgba(255, 255, 255, 0.15);
border-radius: 15px;
padding: 25px;
margin-bottom: 25px;
}
.input-group {
margin-bottom: 20px;
}
label {
display: block;
text-align: left;
margin-bottom: 10px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
textarea {
width: 100%;
min-height: 120px;
padding: 15px;
border: none;
border-radius: 12px;
background: rgba(255, 255, 255, 0.9);
color: #333;
font-size: 18px;
resize: vertical;
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
outline: none;
transition: all 0.3s ease;
}
textarea:focus {
box-shadow: inset 0 2px 15px rgba(0, 0, 0, 0.2), 0 0 0 2px #6a11cb;
}
.buttons {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
button {
flex: 1;
padding: 15px;
border: none;
border-radius: 12px;
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
color: #333;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
button:active {
transform: translateY(0);
}
.convert-btn {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: white;
}
.copy-btn {
background: linear-gradient(135deg, #42e695 0%, #3bb2b8 100%);
color: white;
}
.output-container {
position: relative;
}
.output-text {
min-height: 100px;
padding: 15px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.2);
font-size: 22px;
word-break: break-word;
text-align: left;
border: 2px dashed rgba(255, 255, 255, 0.3);
}
.emoji-styles {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
justify-content: center;
}
.style-btn {
padding: 10px 15px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
background: rgba(255, 255, 255, 0.1);
color: white;
cursor: pointer;
transition: all 0.3s ease;
}
.style-btn.active {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
border-color: transparent;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.share-section {
margin-top: 30px;
}
.share-text {
margin-bottom: 15px;
font-weight: 600;
}
.social-icons {
display: flex;
justify-content: center;
gap: 15px;
}
.social-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.social-icon:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.footer {
margin-top: 30px;
opacity: 0.8;
font-size: 14px;
}
@media (max-width: 600px) {
.container {
padding: 20px;
}
h1 {
font-size: 2rem;
}
.buttons {
flex-direction: column;
}
.emoji-styles {
flex-direction: column;
align-items: center;
}
.style-btn {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="logo">
<div class="logo-icon">
<i class="fas fa-smile"></i>
</div>
<h1>Text to Emoji Converter</h1>
</div>
<p class="tagline">Transform your text into fun emoji style for social media and WhatsApp!</p>
<div class="converter-box">
<div class="input-group">
<label for="input-text"><i class="fas fa-keyboard"></i> Enter your text:</label>
<textarea id="input-text" placeholder="Type or paste your text here..."></textarea>
</div>
<div class="buttons">
<button class="convert-btn" id="convert-btn">
<i class="fas fa-magic"></i> Convert to Emoji
</button>
<button class="copy-btn" id="copy-btn">
<i class="fas fa-copy"></i> Copy Result
</button>
</div>
<div class="input-group">
<label for="output-text"><i class="fas fa-smile"></i> Emoji text:</label>
<div class="output-container">
<div class="output-text" id="output-text">Your emoji text will appear here...</div>
</div>
</div>
<div class="emoji-styles">
<div class="style-btn active" data-style="circle">🔵 Circle Emoji</div>
<div class="style-btn" data-style="square">🟦 Square Emoji</div>
<div class="style-btn" data-style="heart">❤️ Heart Emoji</div>
<div class="style-btn" data-style="star">⭐ Star Emoji</div>
</div>
</div>
<div class="share-section">
<p class="share-text">Share with friends:</p>
<div class="social-icons">
<a href="#" class="social-icon"><i class="fab fa-whatsapp"></i></a>
<a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
<a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
</div>
</div>
<div class="footer">
<p>Text to Emoji Converter - Perfect for Social Media & WhatsApp</p>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const inputText = document.getElementById('input-text');
const outputText = document.getElementById('output-text');
const convertBtn = document.getElementById('convert-btn');
const copyBtn = document.getElementById('copy-btn');
const styleButtons = document.querySelectorAll('.style-btn');
let currentStyle = 'circle';
// Emoji mapping for different styles
const emojiMaps = {
circle: {
'a': '🅐', 'b': '🅑', 'c': '🅒', 'd': '🅓', 'e': '🅔', 'f': '🅕', 'g': '🅖',
'h': '🅗', 'i': '🅘', 'j': '🅙', 'k': '🅚', 'l': '🅛', 'm': '🅜', 'n': '🅝',
'o': '🅞', 'p': '🅟', 'q': '🅠', 'r': '🅡', 's': '🅢', 't': '🅣', 'u': '🅤',
'v': '🅥', 'w': '🅦', 'x': '🅧', 'y': '🅨', 'z': '🅩',
'A': '🅐', 'B': '🅑', 'C': '🅒', 'D': '🅓', 'E': '🅔', 'F': '🅕', 'G': '🅖',
'H': '🅗', 'I': '🅘', 'J': '🅙', 'K': '🅚', 'L': '🅛', 'M': '🅜', 'N': '🅝',
'O': '🅞', 'P': '🅟', 'Q': '🅠', 'R': '🅡', 'S': '🅢', 'T': '🅣', 'U': '🅤',
'V': '🅥', 'W': '🅦', 'X': '🅧', 'Y': '🅨', 'Z': '🅩',
'0': '0️⃣', '1': '1️⃣', '2': '2️⃣', '3': '3️⃣', '4': '4️⃣', '5': '5️⃣',
'6': '6️⃣', '7': '7️⃣', '8': '8️⃣', '9': '9️⃣', ' ': ' '
},
square: {
'a': '🄰', 'b': '🄱', 'c': '🄲', 'd': '🄳', 'e': '🄴', 'f': '🄵', 'g': '🄶',
'h': '🄷', 'i': '🄸', 'j': '🄹', 'k': '🄺', 'l': '🄻', 'm': '🄼', 'n': '🄽',
'o': '🄾', 'p': '🄿', 'q': '🅀', 'r': '🅁', 's': '🅂', 't': '🅃', 'u': '🅄',
'v': '🅅', 'w': '🅆', 'x': '🅇', 'y': '🅈', 'z': '🅉',
'A': '🄰', 'B': '🄱', 'C': '🄲', 'D': '🄳', 'E': '🄴', 'F': '🄵', 'G': '🄶',
'H': '🄷', 'I': '🄸', 'J': '🄹', 'K': '🄺', 'L': '🄻', 'M': '🄼', 'N': '🄽',
'O': '🄾', 'P': '🄿', 'Q': '🅀', 'R': '🅁', 'S': '🅂', 'T': '🅃', 'U': '🅄',
'V': '🅅', 'W': '🅆', 'X': '🅇', 'Y': '🅈', 'Z': '🅉',
'0': '0️⃣', '1': '1️⃣', '2': '2️⃣', '3': '3️⃣', '4': '4️⃣', '5': '5️⃣',
'6': '6️⃣', '7': '7️⃣', '8': '8️⃣', '9': '9️⃣', ' ': ' '
},
heart: {
'a': '💙', 'b': '💙', 'c': '💙', 'd': '💙', 'e': '💙', 'f': '💙', 'g': '💙',
'h': '💙', 'i': '💙', 'j': '💙', 'k': '💙', 'l': '💙', 'm': '💙', 'n': '💙',
'o': '💙', 'p': '💙', 'q': '💙', 'r': '💙', 's': '💙', 't': '💙', 'u': '💙',
'v': '💙', 'w': '💙', 'x': '💙', 'y': '💙', 'z': '💙',
'A': '❤️', 'B': '❤️', 'C': '❤️', 'D': '❤️', 'E': '❤️', 'F': '❤️', 'G': '❤️',
'H': '❤️', 'I': '❤️', 'J': '❤️', 'K': '❤️', 'L': '❤️', 'M': '❤️', 'N': '❤️',
'O': '❤️', 'P': '❤️', 'Q': '❤️', 'R': '❤️', 'S': '❤️', 'T': '❤️', 'U': '❤️',
'V': '❤️', 'W': '❤️', 'X': '❤️', 'Y': '❤️', 'Z': '❤️',
'0': '0️⃣', '1': '1️⃣', '2': '2️⃣', '3': '3️⃣', '4': '4️⃣', '5': '5️⃣',
'6': '6️⃣', '7': '7️⃣', '8': '8️⃣', '9': '9️⃣', ' ': ' '
},
star: {
'a': '⭐', 'b': '⭐', 'c': '⭐', 'd': '⭐', 'e': '⭐', 'f': '⭐', 'g': '⭐',
'h': '⭐', 'i': '⭐', 'j': '⭐', 'k': '⭐', 'l': '⭐', 'm': '⭐', 'n': '⭐',
'o': '⭐', 'p': '⭐', 'q': '⭐', 'r': '⭐', 's': '⭐', 't': '⭐', 'u': '⭐',
'v': '⭐', 'w': '⭐', 'x': '⭐', 'y': '⭐', 'z': '⭐',
'A': '🌟', 'B': '🌟', 'C': '🌟', 'D': '🌟', 'E': '🌟', 'F': '🌟', 'G': '🌟',
'H': '🌟', 'I': '🌟', 'J': '🌟', 'K': '🌟', 'L': '🌟', 'M': '🌟', 'N': '🌟',
'O': '🌟', 'P': '🌟', 'Q': '🌟', 'R': '🌟', 'S': '🌟', 'T': '🌟', 'U': '🌟',
'V': '🌟', 'W': '🌟', 'X': '🌟', 'Y': '🌟', 'Z': '🌟',
'0': '0️⃣', '1': '1️⃣', '2': '2️⃣', '3': '3️⃣', '4': '4️⃣', '5': '5️⃣',
'6': '6️⃣', '7': '7️⃣', '8': '8️⃣', '9': '9️⃣', ' ': ' '
}
};
// Set active style
styleButtons.forEach(btn => {
btn.addEventListener('click', function() {
styleButtons.forEach(b => b.classList.remove('active'));
this.classList.add('active');
currentStyle = this.getAttribute('data-style');
// Convert text with new style if there's input
if (inputText.value.trim() !== '') {
convertText();
}
});
});
// Convert text to emoji
function convertText() {
const text = inputText.value;
let result = '';
for (let char of text) {
if (emojiMaps[currentStyle][char]) {
result += emojiMaps[currentStyle][char];
} else {
result += char;
}
}
outputText.textContent = result || 'Your emoji text will appear here...';
}
// Event listeners
convertBtn.addEventListener('click', convertText);
copyBtn.addEventListener('click', function() {
if (outputText.textContent === 'Your emoji text will appear here...') {
alert('Please convert some text first!');
return;
}
const tempTextArea = document.createElement('textarea');
tempTextArea.value = outputText.textContent;
document.body.appendChild(tempTextArea);
tempTextArea.select();
document.execCommand('copy');
document.body.removeChild(tempTextArea);
// Visual feedback
copyBtn.innerHTML = '<i class="fas fa-check"></i> Copied!';
setTimeout(() => {
copyBtn.innerHTML = '<i class="fas fa-copy"></i> Copy Result';
}, 2000);
alert('Copied to clipboard!');
});
// Social sharing (simulated)
document.querySelectorAll('.social-icon').forEach(icon => {
icon.addEventListener('click', function(e) {
e.preventDefault();
if (outputText.textContent === 'Your emoji text will appear here...') {
alert('Please convert some text first!');
return;
}
alert('Sharing functionality would be implemented in a real app!');
});
});
});
</script>
</body>
</html>
0 टिप्पणियाँ